<!--
  Generated template for the Circle page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>工作圈</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div style="position: relative;margin-bottom: 25px">
    <img class="c-bg" src="assets/img/banner1.jpg">
    <p style="position: absolute;bottom: -5px;right: 90px;color: white;font-size: larger">五月二十二日</p>
    <img (click)="toMyCircle()" src="assets/img/avatar-ts-buzz.png"
         style="position: absolute;bottom: -20px;right: 10px;width: 70px;height: 70px;border-radius: 50%;padding: 2px;background-color: #ffffff;border: 1px solid #dbdbdb">
  </div>
  <ion-grid>
    <ion-row>
      <ion-col col-2 col-sm-1 style="text-align: center">
        <img style="max-height: 40px;max-width: 40px;border-radius: 50%;display: block;float: right"
             src="assets/img/avatar-ts-jessie.png"/>
      </ion-col>
      <ion-col col-10 col-sm-11>
        <p style="color:  #387ef5;margin: 0;font-size: 17px">jessie</p>
        <p style="margin: 0;font-size: 14px">你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪</p>
        <div style="width: 80%;height: 160px;text-align: left;margin-top: 3%">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit: cover">
        </div>
        <ion-grid>
          <ion-row>
            <ion-col col-6 style="text-align: center">
              <ion-icon name="ios-chatbubbles-outline" ></ion-icon>
             152
            </ion-col >
            <ion-col col-6>
              <ion-icon name="ios-heart-outline" ></ion-icon>
              23
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>
  </ion-grid>
  <div style="width: 100%;height: 5px;background-color: #f4f4f4"></div>
  <ion-grid>
    <ion-row>
      <ion-col col-2 col-sm-1 style="text-align: center">
        <img style="max-height: 40px;max-width: 40px;border-radius: 50%;display: block;float: right"
             src="assets/img/avatar-ts-jessie.png"/>
      </ion-col>
      <ion-col col-10 col-sm-11>
        <p style="color:  #387ef5;margin: 0;font-size: 17px">jessie</p>
        <p style="margin: 0;font-size: 14px">你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪</p>
        <div class="circle-img">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit:cover">
        </div>
        <div class="circle-img">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit:cover">
        </div>
        <div class="circle-img">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit:cover">
        </div>
        <div class="circle-img">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit:cover">
        </div>
        <div class="circle-img">
          <img src="assets/img/ci_bg.png" width="100%" height="100%"
               style="object-fit:cover">
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!--  <ion-list >
      <ion-item style="border: none">
        <ion-avatar  item-left>
          <img src="assets/img/avatar-ts-jessie.png">
        </ion-avatar>
        <h2 style="color:  #387ef5">jessie</h2>
        <p>你又拯救了危机 胡迪</p>
      </ion-item>
      <ion-item >
        <ion-avatar style="line-height: 36px!important;" item-left>
          <img src="assets/img/avatar-ts-jessie.png">
        </ion-avatar>
        <h2 style="color:  #387ef5">jessie</h2>
        <p>你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪你又拯救了危机 胡迪</p>
      </ion-item>
    </ion-list>-->
</ion-content>
